<template>
	<div>

		<div class="container"
			:style='{ "minHeight": "100vh", "alignItems": "center", "background": "url(http://codegen.caihongy.cn/20221115/d968ab69ddc8495282963cb2dab971cb.jpg) no-repeat center top", "display": "flex", "width": "100%", "backgroundSize": "cover", "backgroundPosition": "center center", "backgroundRepeat": "no-repeat", "justifyContent": "center" }'>
			<el-form class='rgs-form' v-if="pageFlag == 'register'"
				:style='{ "padding": "20px", "boxShadow": "0 1px 6px rgba(0, 0, 0, .1)", "margin": "0", "borderRadius": "16px", "flexWrap": "wrap", "background": "url(http://codegen.caihongy.cn/20221115/2f997573ef7545c39f9e0eff917cbd30.png) no-repeat left top,url(http://codegen.caihongy.cn/20221115/30139400df864d7eaddf9c3da399146c.png) no-repeat right bottom,#fff", "display": "flex", "width": "800px", "justifyContent": "center", "height": "auto" }'
				ref="registerForm" :model="registerForm" :rules="rules">
				<div v-if="true"
					:style='{ "margin": "0 0 10px 0", "color": "#52b646", "textAlign": "center", "width": "100%", "lineHeight": "44px", "fontSize": "20px", "textShadow": "4px 4px 2px rgba(82, 182, 70, .3)" }'>
					USER / REGISTER</div>
				<div v-if="true"
					:style='{ "margin": "0 auto 20px auto", "borderColor": "#52b646", "color": "#52b646", "textAlign": "center", "borderWidth": "3px", "width": "50%", "letterSpacing": "2px", "lineHeight": "44px", "fontSize": "24px", "borderStyle": "dotted dashed solid double", "fontWeight": "600" }'>
					家庭教师服务系统注册</p>
				</div>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiazhang'" prop="jiazhangzhanghao">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						家长账号：</div>
					<el-input v-model="registerForm.jiazhangzhanghao" placeholder="请输入家长账号" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiazhang'" prop="mima">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						密码：</div>
					<el-input v-model="registerForm.mima" type="password" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiazhang'" prop="mima">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						确认密码：</div>
					<el-input v-model="registerForm.mima2" type="password" placeholder="请再次输入密码" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiazhang'" prop="jiazhangxingming">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						家长姓名：</div>
					<el-input v-model="registerForm.jiazhangxingming" placeholder="请输入家长姓名" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiazhang'" prop="xingbie">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						性别：</div>
					<el-select v-model="registerForm.xingbie" placeholder="请选择性别">
						<el-option v-for="(item, index) in jiazhangxingbieOptions" :key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiazhang'" prop="jiazhangdianhua">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						家长电话：</div>
					<el-input v-model="registerForm.jiazhangdianhua" placeholder="请输入家长电话" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiazhang'" prop="touxiang">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						头像：</div>
					<file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="true"
						:fileUrls="registerForm.touxiang ? registerForm.touxiang : ''"
						@change="jiazhangtouxiangUploadChange"></file-upload>
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="jiaoshizhanghao">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						教师账号：</div>
					<el-input v-model="registerForm.jiaoshizhanghao" placeholder="请输入教师账号" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="mima">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						密码：</div>
					<el-input v-model="registerForm.mima" type="password" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="mima">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						确认密码：</div>
					<el-input v-model="registerForm.mima2" type="password" placeholder="请再次输入密码" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="jiaoshixingming">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						教师姓名：</div>
					<el-input v-model="registerForm.jiaoshixingming" placeholder="请输入教师姓名" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="xingbie">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						性别：</div>
					<el-select v-model="registerForm.xingbie" placeholder="请选择性别">
						<el-option v-for="(item, index) in jiaoshixingbieOptions" :key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="shenfenzheng">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						身份证：</div>
					<el-input v-model="registerForm.shenfenzheng" placeholder="请输入身份证" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="lianxidianhua">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						联系电话：</div>
					<el-input v-model="registerForm.lianxidianhua" placeholder="请输入联系电话" />
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="touxiang">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						头像：</div>
					<file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="true"
						:fileUrls="registerForm.touxiang ? registerForm.touxiang : ''"
						@change="jiaoshitouxiangUploadChange"></file-upload>
				</el-form-item>
				<el-form-item :style='{ "width": "80%", "padding": "0", "margin": "0 auto 24px", "height": "auto" }'
					v-if="tableName == 'jiaoshi'" prop="jiaoshizhuanye">
					<div v-if="false"
						:style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
						教师专业：</div>
					<el-input v-model="registerForm.jiaoshizhuanye" placeholder="请输入教师专业" />
				</el-form-item>
				<el-button
					:style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "boxShadow": "0 2px 4px rgba(82, 182, 70, .2)", "margin": "16px auto 5px", "color": "#fff", "display": "block", "outline": "none", "borderRadius": "8px", "background": "radial-gradient(circle, rgba(132,218,110,1) 0%, rgba(63,187,33,1) 81%, rgba(82,182,70,1) 100%)", "width": "30%", "fontSize": "16px", "height": "40px" }'
					type="primary" @click="submitForm('registerForm')">注册</el-button>
				<el-button
					:style='{ "border": "1px solid #52b646", "cursor": "pointer", "padding": "0 10px", "boxShadow": "0 2px 4px rgba(82, 182, 70, .2)", "margin": "16px auto 5px", "color": "#52b646", "display": "block", "outline": "none", "borderRadius": "8px", "background": "#ecfaea", "width": "30%", "fontSize": "16px", "height": "40px" }'
					@click="resetForm('registerForm')">重置</el-button>
				<router-link
					:style='{ "cursor": "pointer", "padding": "0 10%", "margin": "8px 0 0", "color": "rgba(159, 159, 159, 1)", "textAlign": "left", "display": "inline-block", "width": "100%", "lineHeight": "1", "fontSize": "12px", "textDecoration": "none" }'
					to="/login">已有账户登录</router-link>
			</el-form>
		</div>
	</div>
	
</template>

<script>
import { isLength, matches } from 'validator';
export default {
	//数据集合
	data() {
		return {
			pageFlag: '',
			tableName: '',
			registerForm: {
				xingbie: '',
				xingbie: '',
			},
			rules: {},
			jiazhangxingbieOptions: [],
			jiaoshixingbieOptions: [],

		}
	},
	mounted() {
	},
	created() {
		this.pageFlag = this.$route.query.pageFlag;
		this.tableName = this.$route.query.role;
		if ('jiazhang' == this.tableName) {
			this.rules.jiazhangzhanghao = [{ required: true, message: '请输入家长账号', trigger: 'blur' }];
		}
		if ('jiazhang' == this.tableName) {
			this.rules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' },{ validator: this.validatePassword, trigger: 'blur' }];
		}
		if ('jiaoshi' == this.tableName) {
			this.rules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' },{ validator: this.validatePassword, trigger: 'blur' }];
		}
		if ('jiazhang' == this.tableName) {
			this.rules.jiazhangxingming = [{ required: true, message: '请输入家长姓名', trigger: 'blur' }];
		}
		this.jiazhangxingbieOptions = "男,女".split(',');
		if ('jiazhang' == this.tableName) {
			this.rules.jiazhangdianhua = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
		}
		this.jiaoshixingbieOptions = "男,女".split(',');
		if ('jiaoshi' == this.tableName) {
			this.rules.shenfenzheng = [{ required: true, validator: this.$validate.isIdCard, trigger: 'blur' }];
		}
		if ('jiaoshi' == this.tableName) {
			this.rules.lianxidianhua = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
		}
		if ('jiaoshi' == this.tableName) {
			this.rules.clicknum = [{ required: true, validator: this.$validate.isIntNumer, trigger: 'blur' }];
		}
	},
	//方法集合
	methods: {
		// 获取uuid
		getUUID() {
			return new Date().getTime();
		},
		validatePassword(rule, value, callback) {
      if (!isLength(value, { min: 6 })) {
        callback(new Error('密码长度不能少于6位'));
      } else if (!matches(value, /.*[a-zA-Z].*[a-zA-Z]/)) {
        callback(new Error('密码中至少包含两个字母'));
      } else {
        callback();
      }
    },
		// 下二随
		jiazhangtouxiangUploadChange(fileUrls) {
			this.registerForm.touxiang = fileUrls.replace(new RegExp(this.$config.baseUrl, "g"), "");
		},
		jiaoshitouxiangUploadChange(fileUrls) {
			this.registerForm.touxiang = fileUrls.replace(new RegExp(this.$config.baseUrl, "g"), "");
		},

		// 多级联动参数


		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var url = this.tableName + "/register";
					if (`jiazhang` == this.tableName && this.registerForm.mima != this.registerForm.mima2) {
						this.$message.error(`两次密码输入不一致`);
						return
					}
					if (`jiaoshi` == this.tableName && this.registerForm.mima != this.registerForm.mima2) {
						this.$message.error(`两次密码输入不一致`);
						return
					}
					this.$http.post(url, this.registerForm).then(res => {
						if (res.data.code === 0) {
							this.$message({
								message: '注册成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.$router.push('/login');
								}
							});
						} else {
							this.$message.error(res.data.msg);
						}
					});
				} else {
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
	position: relative;
	background: url(http://codegen.caihongy.cn/20221115/d968ab69ddc8495282963cb2dab971cb.jpg) no-repeat center top;

	.el-date-editor.el-input {
		width: 100%;
	}

	.rgs-form .el-input /deep/ .el-input__inner {
		border: 1px solid #88d67e;
		border-radius: 4px;
		padding: 0 10px;
		box-shadow: inset 0px 0px 48px 0px #def5db;
		outline: none;
		color: #999;
		width: 100%;
		font-size: 14px;
		height: 40px;
	}

	.rgs-form .el-select /deep/ .el-input__inner {
		border: 1px solid #88d67e;
		border-radius: 4px;
		padding: 0 10px;
		box-shadow: inset 0px 0px 48px 0px #def5db;
		outline: none;
		color: #999;
		width: 288px;
		font-size: 14px;
		height: 40px;
	}

	.rgs-form .el-date-editor /deep/ .el-input__inner {
		border: 1px solid #88d67e;
		border-radius: 8px;
		padding: 0 10px 0 30px;
		box-shadow: inset 0px 0px 48px 0px #def5db;
		outline: none;
		color: #999;
		width: 288px;
		font-size: 14px;
		height: 40px;
	}

	.rgs-form .el-date-editor /deep/ .el-input__inner {
		border: 1px solid #88d67e;
		border-radius: 8px;
		padding: 0 10px 0 30px;
		box-shadow: inset 0px 0px 48px 0px #def5db;
		outline: none;
		color: #999;
		width: 288px;
		font-size: 14px;
		height: 40px;
	}

	.rgs-form /deep/ .el-upload--picture-card {
		background: transparent;
		border: 0;
		border-radius: 0;
		width: auto;
		height: auto;
		line-height: initial;
		vertical-align: middle;
	}

	.rgs-form /deep/ .upload .upload-img {
		border: 1px solid #88d67e;
		cursor: pointer;
		border-radius: 8px;
		box-shadow: inset 0px 0px 48px 0px #def5db;
		color: #52b646;
		width: 160px;
		font-size: 32px;
		line-height: 100px;
		text-align: center;
		height: auto;
	}

	.rgs-form /deep/ .el-upload-list .el-upload-list__item {
		border: 1px solid #88d67e;
		cursor: pointer;
		border-radius: 8px;
		box-shadow: inset 0px 0px 48px 0px #def5db;
		color: #52b646;
		width: 160px;
		font-size: 32px;
		line-height: 100px;
		text-align: center;
		height: auto;
	}

	.rgs-form /deep/ .el-upload .el-icon-plus {
		border: 1px solid #88d67e;
		cursor: pointer;
		border-radius: 8px;
		box-shadow: inset 0px 0px 48px 0px #def5db;
		color: #52b646;
		width: 160px;
		font-size: 32px;
		line-height: 100px;
		text-align: center;
		height: auto;
	}
}
</style>
